<template>
    <!-- 扫码登录 -->
    <main class="QRCode-login">
        <aside></aside>
        <article>
            <p>扫码登录</p>
            <section>
                <img alt="二维码" :src="qr_img" v-show="qr_img">
            </section>
            <span>使用<a href="https://music.163.com/#/download">网易云音乐APP</a>扫码登录</span>
        </article>
        <div class="other-mode-login" @click="otherModeLogin">选择其他登录模式</div>
    </main>
</template>
<script>
    import { getCurrentInstance, ref, inject } from 'vue';
    import { useStore } from 'vuex';
    import { useRouter } from 'vue-router'
    export default {
        name: 'Qr',
        setup(props, {emit}) {
            const store = useStore();
            const axios = getCurrentInstance().proxy.$http;
            const emitter = inject('emitter');
            const router = useRouter();

            
            // 二维码登录
            const qr_img = ref();
            let clear_check_time;
            async function qrLogin() {
                // 1.获取生成二维码的key
                const res = await axios.get('/login/qr/key', {
                    params: { timestamp: Date.now() }
                })
                const key = res.data.data.unikey;

                // 2.生成二维码接口
                const res2 = await axios.get('/login/qr/create', {
                    params: {
                        key,
                        timestamp: Date.now(),
                        qrimg: true
                    }
                })
                qr_img.value = res2.data.data.qrimg;

                // 3. 检测二维码扫码状态
                clearInterval(clear_check_time);
                clear_check_time = setInterval(async () => {
                    const res = await axios.get('/login/qr/check', {
                        params: {
                            key,
                            timestamp: Date.now()
                        }
                    })
                    // console.log(res);
                    // console.log(res.data.code);
                    if(res.data.code === 800) {
                        console.log("二维码已过期");
                        clearInterval(clear_check_time);
                    }
                    if(res.data.code === 803) {
                        console.log('登录成功');
                        clearInterval(clear_check_time);
                        // 调用Header组件中的getLoginStatus方法
                        emitter.emit('getLoginStatus', true),
                        router.push({ name: 'recommend' })
                    }
                }, 3000)
            }
            qrLogin();
            
            function otherModeLogin() {
                store.commit('CHANGE_LOGIN_MODE', false)
                clearInterval(clear_check_time);
            }

            // 当关闭登录对话框的时候清除二维码状态定时器
            emitter.on('clearCheckTime', () =>{
                clearInterval(clear_check_time);
            })

            return {
                qr_img,
                otherModeLogin
            }
        }
    }
</script>

<style lang='less' scoped>
// 二维码登录方式
.QRCode-login {
    flex-grow: 1;
    background-color: white;
    display: flex;
    aside {
        flex-basis: 45%;
        background: url(../../assets/img/phone.png) no-repeat;
        background-size: 125px;
        background-position: 70% 40%;
    }
    article {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
            margin-top: 30px;
            margin-bottom: 20px;
            font-size: 20px;
        }
        section {
            width: 138px;
            height: 138px;
            border: 1px solid #f40;
            img {
                width: 100%;
            }
        }
        span {
            margin-top: 10px;
            font-size: 12px;
            color: rgb(148, 145, 145);
            a {
                color: #0c73c2;
                margin: 0 5px;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
    .other-mode-login {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 13px;
        border: 1px solid #ccc;
        padding: 5px 15px;
        border-radius: 20px;
        cursor: pointer;
        user-select: none;
    }
}
</style>